/**
 * @description 存续管理
 * @author wangjianjun
 */

import React, { PureComponent } from 'react';
import { DATA_ENTRY, AdvancedSearch, TabC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import _ from 'lodash';
import TransactionSplit from './tab/TransactionSplit';
import TransferInside from './tab/TransferInsideC';
import styles from './index.less';
import { connect } from 'dva';
@Form.create()
@connect(({ initialSplitM }) => ({
  initialSplitM,
}))
export default class SurvivalManage extends PureComponent {
  constructor(props) {
    super(props);
    this.commonArgs = {};
    this.state = {
      activeKey: 'TransactionSplit',
      transactionSplitArgs: {}, //给真实交易拆分参数
      transferInsideArgs: {}, //给内部转仓参数
      productManageArgs: {}, //给产品管理参数
      isOverFlow: false, //是否有滚动条
      inSideType: 1, //内部转仓默认第一页
    };
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {}

  //tab切换
  tabOnclick = (e) => {
    this.setState(
      {
        activeKey: e,
      },
      () => {
        if (this.commonArgs && this.commonArgs.timestamp) {
          this.commonArgs.timestamp = new Date().getTime();
        }
        this.getTableData(); //切换tab，把参数传给对应组件，获取表格数据
      },
    );
  };

  //切换tab，把参数传给对应组件，获取表格数据
  getTableData = () => {
    const { activeKey } = this.state;
    if (activeKey == 'TransactionSplit') {
      this.setState({
        transactionSplitArgs: _.cloneDeep(this.commonArgs),
        isOverFlow: false,
      });
    }
    if (activeKey == 'TransferInside') {
      this.setState({
        transferInsideArgs: _.cloneDeep(this.commonArgs),
        isOverFlow: this.state.inSideType == 1 ? false : true,
      });
    }
  };
  refresh = () => {
    //真实交易拆分刷新页面
    this.splitRef.getNewData();
  };
  getStatus = (type) => {
    //获取内部转仓的状态 判断是否需要滚动条
    this.setState({
      isOverFlow: type == 1 ? false : true,
      inSideType: type,
    });
  };
  render() {
    const { isOverFlow } = this.state;
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'listId',
          title: '系列产品',
          type: DATA_ENTRY.SERIESPRODUCTS,
          allowClear: false,
          onChange: (e) => {
            this.props.getListId(e ? e.value : undefined);
            let value = {
              id: e.value,
              timestamp: new Date().getTime(),
            };
            this.commonArgs = {
              ...value,
            };
            this.getTableData();
            //获取产品列表数据
            this.props.dispatch({
              type: 'initialSplitM/queryProductList',
              payload: {
                seriesProductId: e.value,
                currentPage: 1,
                numInPage: 50000,
              },
              callback: (res) => {},
            });
          },
        },
      ],
      allowQuery: false,
      allowClear: false,
    };
    return (
      <div className={styles.back}>
        <div>
          <AdvancedSearch {...searchProps} />
        </div>
        <div style={{ marginTop: '10px' }}>
           <TabC
            tabSource={[
              { title: '真实交易拆分', key: 'TransactionSplit', content:  <TransactionSplit args={this.state.transactionSplitArgs} tradeAdd={this.props.tradeAdd} onRef={(ref) => (this.splitRef = ref)} />
            },
              { title: '内部转仓', key: 'TransferInside', content:  <TransferInside args={this.state.transferInsideArgs} getStatus={this.getStatus} />},
              ]}
              activeKey={this.state.activeKey}
              onChange={this.tabOnclick}
            />
        </div>
      </div>
    );
  }
}
